<template>
  <el-select
    class="user-select-tree"
    v-model="textStr"
    :placeholder="placeholder"
    ref="select"
    :size="size"
    :filterable="true"
    :remote="true"
    :remote-method="remoteMethod"
    :clearable="clearable"
    @clear="clearSelect"
    @visible-change="visibleChange"
    :popper-append-to-body="false"
  >
    <el-option
      v-model="value"
      style="
        height: 100%;
        max-height: 200px;
        overflow-y: auto;
        padding: 0;
        background-color: #ffffff;
      "
    >
      <el-tree
        :data="treeList"
        :props="treeProps"
        :filter-node-method="filterNode"
        :current-node-key="currentKey"
        highlight-current
        :node-key="nodeKey"
        ref="selectTree"
        :check-strictly="true"
        @node-click="handleTreeClick"
      >
        <span
          slot-scope="{ data }"
          :title="data[treeProps.label]"
          class="ellipsis"
        >
          {{ data[treeProps.label] }}
        </span>
      </el-tree>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "index",
  props: {
    treeList: {
      type: Array,
    }, //树形原始数据
    treeProps: Object, //树形配置
    nodeKey: String, //树形唯一键值
    defaultSelect: {
      //默认选择
      type: Boolean,
      default: true,
    },
    defaultData: {
      type: Object,
      default: null,
    },
    clearable: { type: Boolean, default: true },
    placeholder: { type: String, default: "请选择" },
    size: {
      type: String,
    },
  },
  data() {
    return {
      textStr: "",
      value: "",
      filterText: "",
      currentKey: "",
      highlightNode: -1,
    };
  },
  watch: {
    filterText(val) {
      this.$refs.selectTree.filter(val);
    },
    // defaultData(val) {
    //   console.log('defaultData:',val,this.highlightNode)
    //   if (this.highlightNode === -1) {
    //     this.setEdit(val);
    //   }
    // },
    defaultData: {
      handler(val) {
        if (this.highlightNode === -1) {
          this.setEdit(val);
        }
      },
      immediate: true,
      deep: true
    },
    treeList(val) {
      if (val.length > 0) {
        this.$nextTick(() => {
          if (this.defaultSelect) {
            this.value = val[0][this.treeProps.children][0][this.nodeKey];
            this.textStr =
              val[0][this.treeProps.children][0][this.treeProps.label];
            this.highlightNode = this.value;
            this.currentKey = this.value;
            this.$refs.selectTree.setCurrentKey(this.highlightNode);
            this.$emit("handleNodeClick", this.value);
          }
        });
      }
    },
  },

  methods: {
    setEdit(obj) {
      if (obj.name !== "" && obj.value !== "") {
        this.value = obj.value;
        this.textStr = obj.name;
        this.$nextTick(() => {
          this.highlightNode = this.value;
          this.currentKey = this.value;
          console.log("set：", this.highlightNode);
          this.$refs.selectTree.setCurrentKey(this.highlightNode);
        });
      }
    },
    visibleChange() {
      this.filterText = "";
    },
    filterNode(value, data) {
      if (!value) return true;
      return data[this.treeProps.label].indexOf(value) !== -1;
    },
    remoteMethod(query) {
      setTimeout(() => {
        this.filterText = query;
      }, 100);
    },
    // 设备类型点击赋值
    handleTreeClick(data, checked) {
      // console.log('check:',data,checked)
      this.filterText = "";
      if (checked) {
        // //判断是否是父子
        if (
          data[this.treeProps.children] !== undefined &&
          data[this.treeProps.children].length !== 0
        ) {
          // console.log('this.highlightNode:', this.highlightNode, data.id)
          // this.$refs.selectTree.setCurrentKey(this.highlightNode);
          this.$refs.selectTree.setCurrentKey(data[this.nodeKey]);
          this.$forceUpdate();
          this.value = data[this.nodeKey];
          this.textStr = data[this.treeProps.label];
        } else {
          console.log("11111111");
          this.value = data[this.nodeKey];
          this.textStr = data[this.treeProps.label];
          this.$forceUpdate();
          this.currentKey = this.value;
          this.highlightNode = data[this.nodeKey];
          this.$emit("handleNodeClick", this.value);
          this.$refs.selectTree.setCheckedKeys([this.highlightNode]);
          this.$refs.select.blur();
        }
      }
    },
    clearFun() {
      this.value = "";
      this.textStr = "";
      this.currentKey = undefined;
      this.highlightNode = undefined;
      this.$refs.selectTree.setCurrentKey(this.highlightNode);
    },
    clearSelect() {
      this.value = "";
      this.textStr = "";
      this.$refs.selectTree.setCurrentKey();
      this.$emit("handleNodeClick", "");
    },
  },
};
</script>

<style scoped lang="scss">
.user-select-tree {
  ::v-deep {
    .el-icon-::before {
      content: "\e6e1";
      //   font-family: "icomoon" !important;
      //   display: inline-block;
      //   -webkit-transform: scale(0.83);
      //   font-size: 10px;
      //   //width: 100%;
      //   //height: 100%;
      //   color: #666666;
      //   pointer-events: none;
    }
    .el-input.is-focus {
      .el-icon- {
        transform: rotate(0deg);
      }
    }
    // .el-input__inner {
    //   height: 36px;
    //   line-height: 36px;
    // }
    // .el-input__icon {
    //   line-height: 36px;
    // }
    // .el-tree-node__content {
    //   height: 32px;
    // }
  }
}
</style>

